<template>
  <div class="user-card">
    <!-- 加载中 -->
    <div class="loading" v-show="showLoading">
      <van-loading type="spinner" color="white" class="van-loading" />
      <p class="tips">名片生成中</p>
    </div>
    <div class="poster-box" v-show="!showModel && !showChooseModel">
      <div class="pic">
        <img :src="posterUrl" alt />
        <transition name="fade" v-if="showTips">
          <div class="tips">长按图片保存，可分享给微信好友或朋友圈</div>
        </transition>
        <div class="btn" @click="showChooseModel=true">编辑海报</div>
      </div>
    </div>
    <div class="poster-model" v-show="showModel">
      <div class="model-cnt" v-if="shareBaseInfo">
        <div class="model-1" v-show="activeIndex===0">
          <div class="pic">
            <img :src="avatarUrl[avatarIndex]" alt />
          </div>
          <div class="name-box">
            <div class="title">{{shareBaseInfo.agentName}}</div>
            <p
              class="signature"
            >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
          </div>
          <div class="agent-info">
            <div class="agent-box">
              <p class="tel">
                <img src="../../../assets/img/market/classify/phone.png" alt />
                {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
              </p>
              <p class="area">
                <img src="../../../assets/img/market/classify/location.png" alt />
                {{shareBaseInfo.mojarRegion | formatMojar}}
              </p>
            </div>
            <div class="qrcode">
              <img :src="shareBaseInfo.miniQrCode" alt="小程序" />
              <p class="tips">长按查看名片</p>
            </div>
          </div>
        </div>
        <div class="model-2" v-show="activeIndex===1">
          <div class="pic">
            <img class="qrcode" :src="shareBaseInfo.miniQrCode" alt />
            <img class="head" :src="avatarUrl[avatarIndex]" alt />
            <p class="tips">长按查看名片</p>
          </div>
          <div class="name-box">
            <div class="title">{{shareBaseInfo.agentName}}</div>
            <p
              class="signature"
            >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
          </div>
          <div class="agent-info">
            <div class="tel">
              <img src="../../../assets/img/market/classify/phone.png" alt />
              {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
            </div>
            <div class="area">
              <img src="../../../assets/img/market/classify/location.png" alt />
              {{shareBaseInfo.mojarRegion | formatMojar}}
            </div>
          </div>
        </div>
        <div class="model-3" v-show="activeIndex===2">
          <div class="pic">
            <img :src="avatarUrl[avatarIndex]" alt />
          </div>
          <div class="name-box">
            <div class="title">{{shareBaseInfo.agentName}}</div>
            <p
              class="signature"
            >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
          </div>
          <div class="agent-info">
            <p class="tel">
              <img src="../../../assets/img/market/classify/phone.png" alt />
              {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
            </p>
            <p class="area">
              <img src="../../../assets/img/market/classify/location.png" alt />
              {{shareBaseInfo.mojarRegion | formatMojar}}
            </p>
          </div>
          <div class="qrcode">
            <img :src="shareBaseInfo.miniQrCode" alt="小程序" />
            <p class="tips">长按查看名片</p>
          </div>
        </div>
      </div>
    </div>
    <div class="poster-list" v-show="showChooseModel">
      <div class="poster-cnt">
        <div class="header-box">
          <div class="title">选择名片封面</div>
          <div class="header-list">
            <div
              class="item"
              v-for="(item,index) in avatarUrl"
              :key="index"
              @click="chooseAvatar(index)"
            >
              <div class="pic" :class="{'active': avatarIndex === index}">
                <img :src="item" alt />
              </div>
              <div class="close" v-show="index !==0" @click.stop="delAvatar(index)">
                <img src="../../../assets/img/market/classify/close.png" alt />
              </div>
            </div>
            <div class="uploader-box" v-show="avatarUrl.length < 5">
              <van-uploader :after-read="onRead" accept="image/*">
                <van-icon name="plus" />
              </van-uploader>
            </div>
          </div>
        </div>
        <div class="title">选择模板样式</div>
        <div class="model-box" v-if="shareBaseInfo">
          <div class="model-1" :class="{'active': activeIndex===0}" @click="changeModel(0)">
            <div class="pic">
              <img :src="avatarUrl[avatarIndex]" alt />
            </div>
            <div class="name-box">
              <div class="title">{{shareBaseInfo.agentName}}</div>
              <p
                class="signature"
              >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
            </div>
            <div class="agent-info">
              <div class="agent-box">
                <p class="tel">
                  <img src="../../../assets/img/market/classify/phone.png" alt />
                  {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
                </p>
                <p class="area">
                  <img src="../../../assets/img/market/classify/location.png" alt />
                  {{shareBaseInfo.mojarRegion | formatMojar}}
                </p>
              </div>
              <div class="qrcode">
                <img :src="shareBaseInfo.miniQrCode" alt="小程序" />
                <p class="tips">长按查看名片</p>
              </div>
            </div>
          </div>
          <div class="model-2" :class="{'active': activeIndex===1}" @click="changeModel(1)">
            <div class="pic">
              <img class="qrcode" :src="shareBaseInfo.miniQrCode" alt />
              <img class="head" :src="avatarUrl[avatarIndex]" alt />
              <p class="tips">长按查看名片</p>
            </div>
            <div class="name-box">
              <div class="title">{{shareBaseInfo.agentName}}</div>
              <p
                class="signature"
              >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
            </div>
            <div class="agent-info">
              <div class="tel">
                <img src="../../../assets/img/market/classify/phone.png" alt />
                {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
              </div>
              <div class="area">
                <img src="../../../assets/img/market/classify/location.png" alt />
                {{shareBaseInfo.mojarRegion | formatMojar}}
              </div>
            </div>
          </div>
          <div class="model-3" :class="{'active': activeIndex===2}" @click="changeModel(2)">
            <div class="pic">
              <img :src="avatarUrl[avatarIndex]" alt />
            </div>
            <div class="name-box">
              <div class="title">{{shareBaseInfo.agentName}}</div>
              <p
                class="signature"
              >房产{{shareBaseInfo.saleType || '买卖经纪人'}} · {{shareBaseInfo.workingTime | formatWorkTime}}从业经验</p>
            </div>
            <div class="agent-info">
              <p class="tel">
                <img src="../../../assets/img/market/classify/phone.png" alt />
                {{shareBaseInfo.areaCode}} {{shareBaseInfo.mobile}}
              </p>
              <p class="area">
                <img src="../../../assets/img/market/classify/location.png" alt />
                {{shareBaseInfo.mojarRegion | formatMojar}}
              </p>
            </div>
            <div class="qrcode">
              <img :src="shareBaseInfo.miniQrCode" alt="小程序" />
              <p class="tips">长按查看名片</p>
            </div>
          </div>
        </div>
      </div>
      <div class="preview" v-show="showPreview" @click="showPreview=false">
        <div class="pic">
          <img src id="preview-img" alt />
          <div class="close">
            <i class="iconfont icon-chat_Shutdown"></i>
          </div>
        </div>
      </div>
      <div class="action-btn">
        <div class="view" @click="previewFn">预览</div>
        <div class="save" @click="saveModel">保存</div>
      </div>
    </div>
    <!-- 截图 -->
    <div class="cropper-box" v-show="showCopper">
      <vueCropper
        ref="cropper"
        :img="imgSrc"
        :viewMode="1"
        :autoCrop="true"
        :canMove="false"
        :autoCropWidth="360"
        :autoCropHeight="360"
        :fixedBox="true"
        :canMoveBox="true"
        :centerBox="true"
        :rotatable="true"
        mode="cover"
      ></vueCropper>
      <div class="action">
        <button class="cancle" @click="cancleCropper">取消</button>
        <button class="save" @click="cropper">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import h2c from 'html2canvas'
import userService from '@/services/userService'
import { randomString, dataURLtoBlob, checkStrLength, checkStrType, checkPhoneNum, downloadFile } from '@/utils/tool'
import CosCloud from 'cos-js-sdk-v4'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper
  },
  data() {
    return {
      showLoading: true,
      agentId: '',
      posterUrl: '',
      activeIndex: 0,
      shareBaseInfo: '', // 默认数据
      id: '', //经纪人编辑信息id
      avatarUrl: [],
      avatarIndex: 0,
      showTips: true,
      showModel: true,
      showChooseModel: false,
      showPreview: false,
      cos: null, //封面照片
      appId: '10037467',
      bucket: '720ljq2test',
      region: 'sh',
      uploadImg: '', // 上传图片
      showCopper: false, // 截图框
      imgSrc: '', // 被截图图片
      editData: ''
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.agentId = this.$route.query.agentId || this.userInfo.agentId
    this.queryAgentCardShare()
    this.initCos()
  },
  methods: {
    // 获取分享卡片详情
    getCardInfo() {
      userService
        .getQrCodeByToken()
        .then(res => {
          if (this.editData.chooseCover) {
            this.avatarIndex += 1
          }
          this.cardImg = res.avatarUrl
          this.avatarUrl.unshift(res.avatarUrl)
          this.shareBaseInfo = res
          this.$nextTick(() => {
            this.htmlToImg()
          })
        })
        .catch()
    },
    // 获取经纪人修改信息
    queryAgentCardShare() {
      userService
        .queryAgentCardShare({})
        .then(res => {
          this.id = res.id
          this.editData = res
          if (res.coverImg) {
            this.avatarUrl.push(...res.coverImg.split(','))
          }
          if (res.chooseCover) {
            this.avatarIndex = res.chooseCover - 1
          }
          if (res.chooseTemplate) {
            this.activeIndex = res.chooseTemplate
          }
          this.getCardInfo()
        })
        .catch(err => {})
    },
    // 更新经纪人信息
    insertOrUpdateShare() {
      let [...imgArr] = this.avatarUrl
      imgArr.splice(0, 1)
      let data = {
        id: this.id,
        chooseCover: this.avatarIndex ? this.avatarIndex : 0,
        chooseTemplate: this.activeIndex,
        coverImg: imgArr.join(','),
        userId: this.userInfo.agentId
      }
      userService
        .insertOrUpdateShare(data)
        .then(res => {})
        .catch(err => {})
    },
    // 生成海报图片
    htmlToImg() {
      let cls = `.model-${this.activeIndex + 1}`
      let img = document.getElementById('preview-img')
      let _that = this
      h2c(document.querySelector(cls), {
        backgroundColor: '#fff',
        scale: 3,
        useCORS: true,
        allowTaint: false,
        logging: false,
        width: '344px',
        heigt: '543px'
      }).then(canvas => {
        let dataURL = canvas.toDataURL()
        img.src = dataURL
        _that.posterUrl = dataURL
        _that.showModel = false
        _that.showLoading = false
      })
    },
    // 切换模板
    changeModel(index) {
      this.activeIndex = index
    },
    // 预览模板
    previewFn() {
      this.showModel = true
      this.htmlToImg()
      this.showPreview = true
    },
    // 保存模板
    saveModel() {
      this.insertOrUpdateShare()
      this.showChooseModel = false
      this.showModel = true
      this.htmlToImg()
    },
    // 图片上传组件
    onRead(file) {
      this.imgSrc = file.content
      this.showCopper = true
    },
    // 图片裁剪
    cropper() {
      this.showCopper = false
      this.$refs.cropper.getCropData(data => {
        this.uploadCropperImg(data)
      })
    },
    // 取消图片截图
    cancleCropper() {
      this.showCopper = false
      this.imgSrc = ''
    },
    // 图片压缩上传
    uploadCropperImg(imgData) {
      this.showLoading = true
      // let imgData = file.content
      let image = new Image()
      image.src = imgData
      if (imgData.length > 100 * 1024) {
        let that = this
        image.onload = function() {
          imgData = that.compress(image, '')
        }
      }
      this.postImg(imgData)
    },
    // 上传图片签名
    async initCos() {
      let result = await userService.getCosAppSign()
      if (result) {
        this.cos = new CosCloud({
          appid: this.appId,
          bucket: this.bucket,
          region: this.region,
          getAppSign: function(callback) {
            callback(result.signature)
          },
          getAppSignOnce: function(callback) {
            callback(result.signature)
          }
        })
      }
    },
    //图片的上传
    postImg(imageData) {
      var file = dataURLtoBlob(imageData)
      this.cos.uploadFile(this.uploadSuccess, this.uploadError, null, this.bucket, randomString(16), file, 0, null)
    },
    uploadSuccess(result) {
      let res_data = result.data
      if (res_data) {
        this.uploadImg = res_data.access_url
        this.avatarUrl.push(res_data.access_url)
      } else {
        this.$toast('上传失败')
      }
      this.showLoading = false
    },
    uploadError(err) {
      this.showLoading = false
      this.$toast(err)
    },
    //图片压缩
    compress: function(img, Orientation) {
      let canvas = document.createElement('canvas')
      let ctx = canvas.getContext('2d')
      //瓦片canvas
      let tCanvas = document.createElement('canvas')
      let tctx = tCanvas.getContext('2d')
      let initSize = img.src.length
      let width = img.width
      let height = img.height

      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
      let ratio
      if ((ratio = (width * height) / 4000000) > 1) {
        console.log('大于400万像素')
        ratio = Math.sqrt(ratio)
        width /= ratio
        height /= ratio
      } else {
        ratio = 1
      }
      canvas.width = width
      canvas.height = height
      //        铺底色
      ctx.fillStyle = '#fff'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      //如果图片像素大于100万则使用瓦片绘制
      let count
      if ((count = (width * height) / 1000000) > 1) {
        count = ~~(Math.sqrt(count) + 1) //计算要分成多少块瓦片
        //            计算每块瓦片的宽和高
        let nw = ~~(width / count)
        let nh = ~~(height / count)
        tCanvas.width = nw
        tCanvas.height = nh
        for (let i = 0; i < count; i++) {
          for (let j = 0; j < count; j++) {
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height)
      }
      //修复ios上传图片的时候 被旋转的问题
      if (Orientation != '' && Orientation != 1) {
        switch (Orientation) {
          case 6: //需要顺时针（向左）90度旋转
            this.rotateImg(img, 'left', canvas)
            break
          case 8: //需要逆时针（向右）90度旋转
            this.rotateImg(img, 'right', canvas)
            break
          case 3: //需要180度旋转
            this.rotateImg(img, 'right', canvas) //转两次
            this.rotateImg(img, 'right', canvas)
            break
        }
      }
      //进行最小压缩
      let ndata = canvas.toDataURL('image/jpeg', 0.8)
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0
      return ndata
    },
    //图片旋转
    rotateImg: function(img, direction, canvas) {
      //最小与最大旋转方向，图片旋转4次后回到原方向
      const min_step = 0
      const max_step = 3
      if (img == null) return
      //img的高度和宽度不能在img元素隐藏后获取，否则会出错
      let height = img.height
      let width = img.width
      let step = 2
      if (step == null) {
        step = min_step
      }
      if (direction == 'right') {
        step++
        //旋转到原位置，即超过最大值
        step > max_step && (step = min_step)
      } else {
        step--
        step < min_step && (step = max_step)
      }
      //旋转角度以弧度值为参数
      let degree = (step * 90 * Math.PI) / 180
      let ctx = canvas.getContext('2d')
      switch (step) {
        case 0:
          canvas.width = width
          canvas.height = height
          ctx.drawImage(img, 0, 0)
          break
        case 1:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, 0, -height)
          break
        case 2:
          canvas.width = width
          canvas.height = height
          ctx.rotate(degree)
          ctx.drawImage(img, -width, -height)
          break
        case 3:
          canvas.width = height
          canvas.height = width
          ctx.rotate(degree)
          ctx.drawImage(img, -width, 0)
          break
      }
    },
    // 选择封面
    chooseAvatar(index) {
      this.avatarIndex = index
    },
    // 删除封面图片
    delAvatar(index) {
      if (this.avatarIndex === index) {
        this.avatarIndex = 0
      }
      this.avatarUrl.splice(index, 1)
    }
  },
  mounted() {
    setTimeout(() => {
      this.showTips = false
    }, 5000)
  },
  filters: {
    formatWorkTime(val) {
      let status = {
        100: '3年',
        101: '5年',
        102: '8年',
        103: '10年以上'
      }
      return status[val] || '3年'
    },
    formatMojar(val) {
      if (val) {
        val = val.replace(/['省''自治区''市']/g, '')
        let data = val.split('/')
        if (data[1] !== '片区' || data[1] !== '高新区') {
          data[1] = data[1].replace(/['高新区''新区''片区''区']/g, '')
        }
        return `${data[0]} - ${data[1]}`
      } else {
        return '未知'
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.showPreview) {
      this.showPreview = false
      return next(false)
    } else if (this.showChooseModel) {
      this.showChooseModel = false
      return next(false)
    } else {
      next()
    }
  },
  watch: {
    showChooseModel(val) {
      if (val) {
        document.querySelector('.back-home-box').style.display = 'none'
      } else {
        document.querySelector('.back-home-box').style.display = 'block'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-card {
  height: 100%;
  font-size: 12px;
  .poster-box {
    height: 100%;
    background: rgba(33, 33, 33, 1);
    padding: 24px 0;
    .pic {
      position: relative;
      width: 344px;
      height: 543px;
      margin: auto;
      img {
        width: 100%;
        height: 100%;
      }
      .tips {
        width: 244px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        background: rgba(0, 0, 0, 0.6);
        border-radius: 4px;
        font-size: 12px;
        color: #fff;
        position: absolute;
        top: 21px;
        left: 50px;
        z-index: 3;
      }
      .btn {
        height: 30px;
        background: rgba(0, 122, 230, 1);
        border-radius: 100px 0px 0px 100px;
        opacity: 0.74;
        padding: 0 10px;
        color: #fff;
        text-align: center;
        line-height: 30px;
        position: absolute;
        right: 0;
        top: 12px;
        z-index: 2;
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(-60px);
  }
  .poster-model {
    height: 100%;
    background: rgba(33, 33, 33, 1);
    padding: 24px 0;
    .model-cnt {
      width: 344px;
      height: 543px;
      margin: 0 auto;
      overflow: hidden;
      background-color: #fff;
    }
  }
  .poster-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .poster-cnt {
      flex: 1;
      overflow-y: scroll;
      .header-box {
        .header-list {
          padding: 20px 16px;
          border-bottom: 8px solid #f7f9fa;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .item {
            width: 100px;
            height: 100px;
            margin: 0 10px 10px 0;
            position: relative;
            .pic {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              border: 2px solid #fff;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                vertical-align: middle;
              }
              &.active {
                border-color: #007ae6;
              }
            }
            .close {
              width: 16px;
              height: 16px;
              position: absolute;
              top: -5px;
              right: -5px;
              background-color: #fff;
              border-radius: 50%;
            }
            &:nth-child(5) {
              margin-right: auto;
            }
          }
        }
        .uploader-box {
          margin-right: auto;
          height: 100px;
          .van-uploader {
            height: 100px;
            width: 100px;
            background-color: #f4f5f6;
            border: 1px solid rgba(155, 164, 180, 0.2);
            border-radius: 6px;
            color: #9ba4b4;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
              font-size: 24px;
              color: #9ba4b4;
              font-weight: 400;
              opacity: 0.8;
            }
          }
        }
      }
      .model-box {
        flex: 1;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        .model-1,
        .model-2,
        .model-3 {
          width: 344px;
          height: 543px;
          flex-shrink: 0;
          margin: 0 -70% -70% 0;
          transform: scale(0.3);
          border: 4px solid #eee;
          transform-origin: 0 0;
          overflow: hidden;
        }
        .active {
          border-color: #007ae6;
        }
        .model-1 {
          .pic {
            width: 100%;
          }
        }
      }
      .title {
        height: 22px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(19, 40, 77, 1);
        line-height: 22px;
        padding: 20px 16px;
      }
    }
    .action-btn {
      border-top: 0.5px solid #cfcfd9;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .view {
        width: 160px;
        height: 44px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 122, 230, 1);
        line-height: 44px;
        text-align: center;
        border: 1px solid rgba(0, 122, 230, 1);
      }
      .save {
        width: 160px;
        height: 44px;
        background: rgba(0, 122, 230, 1);
        border-radius: 6px;
        font-size: 14px;
        color: #fff;
        line-height: 44px;
        text-align: center;
      }
    }
    .preview {
      height: 100%;
      background: rgba(33, 33, 33, 0.8);
      padding: 24px 0;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      .pic {
        width: 344px;
        height: 543px;
        margin: auto;
        position: relative;
        overflow: hidden;
        img {
          width: 344px;
          height: 543px;
        }
        .close {
          position: absolute;
          right: 5px;
          top: 5px;
          background-color: rgba(0, 0, 0, 0.6);
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          border-radius: 50%;
          color: #fff;
          i {
            font-size: 12px;
          }
        }
      }
    }
  }
  .model-1 {
    width: 100%;
    height: 100%;
    .pic {
      width: 100.5%;
      height: 343px;
      overflow: hidden;
      img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
      }
    }
    .name-box {
      margin: 34px 16px 14px;
      .title {
        height: 24px;
        font-size: 24px;
        font-weight: 600;
        color: rgba(19, 40, 77, 1);
        line-height: 24px;
        overflow: hidden;
      }
      .signature {
        height: 17px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(155, 164, 180, 1);
        line-height: 17px;
        padding-top: 7px;
      }
    }
    .agent-info {
      display: flex;
      padding: 0 16px;
      .agent-box {
        flex: 1;
        font-size: 16px;
        color: rgba(64, 81, 112, 1);
        .tel {
          padding-top: 33px;
          margin-bottom: 12px;
        }
        .tel,
        .area {
          display: flex;
          align-items: center;
          img {
            width: 18px;
            margin-right: 6px;
          }
        }
      }
      .qrcode {
        img {
          width: 64px;
          height: 64px;
        }
        .tips {
          height: 14px;
          font-size: 10px;
          font-weight: 400;
          color: rgba(156, 165, 181, 1);
          line-height: 14px;
          margin-top: 6px;
        }
      }
    }
  }
  .model-2 {
    width: 100%;
    height: 100%;
    background-color: #fff;
    .pic {
      padding: 32px 32px 0;
      position: relative;
      text-align: center;
      .qrcode {
        width: 280px;
        height: 280px;
      }
      .head {
        width: 140px;
        height: 140px;
        border: 5px solid #fff;
        border-radius: 50%;
        position: absolute;
        top: 51%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .tips {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(155, 164, 180, 1);
        line-height: 20px;
        padding-top: 16px;
      }
    }
    .name-box {
      margin-top: 43px;
      text-align: center;
      .title {
        height: 24px;
        font-size: 28px;
        font-weight: 600;
        color: rgba(19, 40, 77, 1);
        line-height: 24px;
      }
      .signature {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(155, 164, 180, 1);
        line-height: 20px;
        padding-top: 8px;
      }
    }
    .agent-info {
      padding: 52px 0;
      text-align: center;
      overflow: hidden;
      display: flex;
      justify-content: center;
      color: #405170;
      .tel,
      .area {
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        img {
          width: 18px;
          margin-right: 2px;
        }
      }
      .tel {
        margin-right: 10px;
      }
    }
  }
  .model-3 {
    width: 100%;
    height: 100%;
    .pic {
      padding-top: 42px;
      text-align: center;
      img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
      }
    }
    .name-box {
      text-align: center;
      .title {
        margin-top: 24px;
        font-size: 28px;
        font-weight: 600;
        color: rgba(19, 40, 77, 1);
      }
      .signature {
        font-size: 14px;
        font-weight: 400;
        color: rgba(155, 164, 180, 1);
        margin-top: 8px;
      }
    }
    .agent-info {
      margin: 16px 0;
      display: flex;
      text-align: center;
      overflow: hidden;
      display: flex;
      justify-content: center;
      color: #405170;
      .tel,
      .area {
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        img {
          width: 18px;
          margin-right: 2px;
        }
      }
      .tel {
        margin-right: 10px;
      }
    }
    .qrcode {
      margin-top: 35px;
      text-align: center;
      img {
        width: 120px;
        height: 120px;
      }
      .tips {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(155, 164, 180, 1);
        line-height: 20px;
      }
    }
  }
  // 截图
  .cropper-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    background-color: #fff;
    .action {
      position: absolute;
      bottom: 20px;
      width: 100%;
      font-size: 14px;
      color: #fff;
      text-align: center;
      button {
        width: 120px;
        height: 40px;
        border: none;
        border-radius: 6px;
        margin: 0 15px;
        &.cancle {
          background-color: #999;
        }
        &.save {
          background-color: #0069ca;
        }
      }
    }
  }
  // loading
  .loading {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 3;
    .van-loading {
      display: inline-block;
      position: fixed;
      left: 50%;
      top: 50%;
      width: 50px;
      height: 50px;
      z-index: 5;
      margin-left: -25px;
      margin-top: -25px;
    }
    .tips {
      color: #fff;
      display: inline-block;
      position: fixed;
      left: 50%;
      top: 60%;
      width: 100px;
      height: 50px;
      z-index: 5;
      margin-left: -50px;
      margin-top: -25px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
</style>
